import React, { PureComponent } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Form, Input, Card, Button, Modal, Collapse, Radio, Tooltip, Row, Col, Spin } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DealerProductDetails from '../../components/Falcon/DealerProductDetails';
import ChannelProductEditor from '../../components/Falcon/ChannelProductEditor';
import styles from './ChannelDetails.less';
import querystring from 'querystring';
import { message } from 'antd';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const ButtonGroup = Button.Group;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ channel }) => ({
  channel,
}))
@Form.create()
export default class ChannelDetails extends PureComponent {
  state = {
    channelId: '',
    modalVisible: false,
    productState: '',
    modifyDetails: false,
    channelDetailsState: '',
    opinions: false,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    dispatch({
      type: 'channel/detailsChannel',
      payload: {
        channelId: params.id,
      },
    });
    this.setState({
      channelId: params.id,
      channelDetailsState: params.state,
    });
  }

  handleEditProductClick = () => {
    this.props.dispatch(
      routerRedux.push(`/channel/channel-product-details-updata?channelId=${this.state.channelId}`)
    );
  };

  handleDeleteProductClick = () => {
    this.setState({
      modalVisible: true,
    });
  };

  handleModifyDetails = () => {
    this.setState({
      modifyDetails: true,
    });
  };

  handleModifyDetailsOK = () => {
    this.setState({
      modifyDetails: false,
    });
  };

  handleModifyDetailsCancel = () => {
    this.setState({
      modifyDetails: false,
    });
  };

  handleEditChannelClick = () => {
    this.props.dispatch(
      routerRedux.push(`/channel/channel-details-updata?channelId=${this.state.channelId}`)
    );
  };

  handleSubmitChannelAudit = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        dispatch({
          type: 'channel/auditChannel',
          payload: {
            id: this.state.channelId,
            ...values,
          },
          callback: () => {
            const { channel: { updateChannelResult } } = this.props;
            if (updateChannelResult.code == '200') {
              dispatch(routerRedux.push(`/channel/dealer-audit`));
              message.success('提交成功');
            } else {
              message.error(updateChannelResult.message);
            }
          },
        });
      }
    });
  };

  handleCallbackChannelList = () => {
    this.props.dispatch(routerRedux.push(`/channel/channel-maintenance`));
  };

  handleApprovalOpinions = () => {
    this.setState({
      opinions: true,
    });
  };

  handleOpinionsOK = () => {
    this.setState({
      opinions: false,
    });
  };

  handleOpinionsCancel = () => {
    this.setState({
      opinions: false,
    });
  };

  handleVerifyResult = key => {
    switch (key) {
      case 1:
        return '通过';
        break;
      case 2:
        return '驳回';
        break;
      case 3:
        return '拒绝';
        break;
    }
  };

  handleCallback = () => {
    window.history.back(-1);
  };

  render() {
    const { channel: { channelDetails, channelLoading, channelDetailsLoading } } = this.props;
    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
    const action = (
      <div style={{ flex: '1' }}>
        {this.state.channelDetailsState == 1 ? (
          <ButtonGroup>
            <Button onClick={this.handleCallback}>返回</Button>
            <Button onClick={this.handleApprovalOpinions}>查看审批意见</Button>
          </ButtonGroup>
        ) : (
          ''
          // <ButtonGroup>
          //   <Button onClick={this.handleModifyDetails}>修改详情</Button>
          // </ButtonGroup>
        )}
      </div>
    );

    const formItemLayoutOfHorizon = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 10,
      },
    };
    return (
      <PageHeaderLayout className={styles.channelDetailsContainer} title="渠道详情" action={action}>
        {/* {JSON.stringify(channelDetails)} */}
        {channelDetailsLoading ? (
          <div className={styles.spinContainer}>
            <Spin size="large" />
          </div>
        ) : (
          channelDetails && (
            <div>
              <Card
                title="基本信息"
                extra={
                  this.state.channelDetailsState == 1 ? (
                    <Tooltip title="编辑">
                      <Button
                        onClick={this.handleEditChannelClick}
                        type="dashed"
                        size="small"
                        shape="circle"
                        icon="form"
                      />
                    </Tooltip>
                  ) : null
                }
              >
                <DealerProductDetails channelDetails={channelDetails} />
              </Card>

              <Card title="代理权限信息">
                <ChannelProductEditor channelDetailsState={this.state.channelDetailsState} />
              </Card>
              {this.state.channelDetailsState == 2 ? (
                <Card className={styles.preCheckFormCard}>
                  <Form className={styles.preCheckForm}>
                    <FormItem label="初审结果" {...formItemLayoutOfHorizon}>
                      {getFieldDecorator('result', {})(
                        <RadioGroup>
                          <Radio value={1}>通过</Radio>
                          <Radio value={2}>驳回</Radio>
                          <Radio value={3}>否决</Radio>
                        </RadioGroup>
                      )}
                    </FormItem>
                    <FormItem label="初审意见" {...formItemLayoutOfHorizon}>
                      {getFieldDecorator('note', {})(
                        <TextArea rows={4} placeholder="请输入意见说明" />
                      )}
                    </FormItem>
                    <FormItem
                      wrapperCol={{
                        xs: { span: 24, offset: 0 },
                        sm: {
                          span: formItemLayoutOfHorizon.wrapperCol.span,
                          offset: formItemLayoutOfHorizon.labelCol.span,
                        },
                      }}
                      label=""
                    >
                      <Button
                        type="primary"
                        onClick={this.handleSubmitChannelAudit}
                        loading={channelLoading}
                      >
                        提交
                      </Button>
                      <Button
                        style={{ marginLeft: '15px' }}
                        onClick={this.handleCallbackChannelList}
                      >
                        返回
                      </Button>
                    </FormItem>
                  </Form>
                </Card>
              ) : null}
              <Modal
                title="修改详情"
                visible={this.state.modifyDetails}
                onOk={this.handleModifyDetailsOK}
                onCancel={this.handleModifyDetailsCancel}
                keyboard={true}
              />

              <Modal
                title="查看审批意见"
                visible={this.state.opinions}
                onOk={this.handleOpinionsOK}
                onCancel={this.handleOpinionsCancel}
                footer={null}
                keyboard={true}
              >
                <Row>
                  <Col span={24}>
                    <Form>
                      <FormItem label="审核结果" {...formItemLayout}>
                        {channelDetails.channel &&
                          this.handleVerifyResult(channelDetails.channel.verify.result)}
                      </FormItem>
                      <FormItem label="审核意见" {...formItemLayout}>
                        {channelDetails.channel && channelDetails.channel.verify.note}
                      </FormItem>
                    </Form>
                  </Col>
                </Row>
              </Modal>
            </div>
          )
        )}
      </PageHeaderLayout>
    );
  }
}
